<template>
  <!--最新播报-->
  <div class="latest_report">
    <div class="latest_report_title"><i></i>最新播报</div>
    <ul class="latest_report_list">
      <li v-for="newReport in newReports"><a>{{newReport.text}}</a></li>
    </ul>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          newReports: [
            {'text': '我省携手央企打造国际一流“安全谷”'},
            {'text': '全产业链推动轨道交通产业发展'},
            {'text': '四川将探索建设内陆自由贸易港'},
            {'text': '米易发力农业供给侧改革 攀西裂谷盛开'},
            {'text': '我省携手央企打造国际一流“安全谷”'},
            {'text': '全产业链推动轨道交通产业发展'},
            {'text': '四川将探索建设内陆自由贸易港'},
            {'text': '米易发力农业供给侧改革 攀西裂谷盛开'},
            {'text': '四川将探索建设内陆自由贸易港'},
            {'text': '米易发力农业供给侧改革 攀西裂谷盛开'}
          ]
        }
      }
    }
</script>

<style>
  .latest_report{
    width: 251px;
    height: 328px;
    background: url("../../common/img/bg_newreport.png");
  }
  .latest_report_title{
    font-size: 16px;
    font-weight: bold;
    color: #ed7918;
  }
  .latest_report_title>i{
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 15px 8px -7px 10px;
    background: url("../../common/img/image.png") no-repeat -10px -10px;
  }
  .latest_report_list{
    margin: 15px 10px 0 10px;
    font-size: 13px;
    list-style: none;

  }
  .latest_report_list li{
    overflow: hidden;
    padding: 7px 0;
    text-indent: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
  }
  .latest_report_list li:before{
    content: '•';
    position: absolute;
    left: -10px;
    text-align: left;
  }
</style>
